<template>
  <div class="container">
    <!-- 减免操作 -->
    <el-tabs class="tabs-borderCard" v-model="activeName">
      <el-tab-pane label="减免费用" name="reduction">
        <el-form ref="form" :model="form" :inline="true" label-width="80px" style="padding: 15px 20px 0 20px">
          <el-form-item label="用户编号">
            <!-- 实际为水表编号查询 -->
            <el-input class="form_input" v-model="reductionTableInfo.meterID" placeholder="请输入用户编号"
              @keyup.enter.native="getUserData"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getUserData">查询</el-button>
          </el-form-item>
          <br />
          <el-form-item label="用户姓名">
            <el-input class="form_input" v-model="reductionTableInfo.name" placeholder="用户姓名" readonly></el-input>
          </el-form-item>
        </el-form>
        <!-- 欠费记录 -->
        <PagesTable :isIndex="true" :tableHeader="reductionTableInfo.tableHeader"
          :tableData="reductionTableInfo.tableData" :tablePagination="reductionTableInfo.tablePagination"
          :tableOperation="reductionTableInfo.tableOperation" @pageOperation="handlePageOperation" />
      </el-tab-pane>
      <el-tab-pane label="冲减水量" name="operation3">
        <el-form ref="form" :model="form" label-width="80px" style="padding: 15px 20px">
          <el-form-item label="用户编号">
            <el-input class="form_input" v-model="form.code" placeholder="请输入用户编号"></el-input>
          </el-form-item>
          <el-form-item label="用户姓名">
            <el-input class="form_input" v-model="form.name" placeholder="用户姓名" readonly></el-input>
          </el-form-item>
          <el-form-item label="水量">
            <el-input class="form_input" v-model="form.num" placeholder="冲减水量"></el-input>
          </el-form-item>
          <el-form-item label="操作员">
            <el-input class="form_input" v-model="form.operator" placeholder="操作员" readonly></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即提交</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="冲红销账" name="operation4">
        <el-form ref="form" :model="form" label-width="80px" style="padding: 15px 20px">
          <el-form-item label="用户编号">
            <el-input class="form_input" v-model="form.code" placeholder="请输入用户编号"></el-input>
          </el-form-item>
          <el-form-item label="用户姓名">
            <el-input class="form_input" v-model="form.name" placeholder="用户姓名" readonly></el-input>
          </el-form-item>
          <el-form-item label="账单号">
            <el-select v-model="form.billNumber" placeholder="请选择账单号"></el-select>
          </el-form-item>
          <el-form-item label="操作员">
            <el-input class="form_input" v-model="form.operator" placeholder="操作员" readonly></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即提交</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="操作记录" name="record" lazy>
        <PagesTable :tableHeader="tableInfo.tableHeader" :tableData="tableInfo.tableData"
          :tablePagination="tableInfo.tablePagination" @pageSize="pageSizeChange" @currentPage="currentPageChange" />
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="减免费用信息" :visible.sync="dialogReductionVisible" width="500px">
      <el-form :model="reductionTableInfo.form" label-width="82px">
        <el-form-item label="账单号：">
          <span class="form_con">{{reductionTableInfo.form.meterReadingRecordID}}</span>
        </el-form-item>
        <el-form-item label="水费：">
          <span class="form_con">{{reductionTableInfo.form.waterFee}}</span>
          <span class="form_label">减免水费</span>
          <el-input class="form_input" v-model="reductionTableInfo.form.waterFeeWaiver" placeholder="小于等于水费"></el-input>
        </el-form-item>
        <el-form-item label="水资源税：">
          <span class="form_con">{{reductionTableInfo.form.tax}}</span>
          <span class="form_label">减免水资源税</span>
          <el-input class="form_input" v-model="reductionTableInfo.form.taxWaiver" placeholder="小于等于水资源税"></el-input>
        </el-form-item>
        <el-form-item label="污水费：">
          <span class="form_con">{{reductionTableInfo.form.effluentFee}}</span>
          <span class="form_label">减免污水费</span>
          <el-input class="form_input" v-model="reductionTableInfo.form.effluentFeeWaiver" placeholder="小于等于污水费">
          </el-input>
        </el-form-item>
        <!-- <el-form-item label="其他费用">
          <el-input class="form_input" v-model="reductionTableInfo.form.otherFee" placeholder="其他"></el-input>
        </el-form-item>
        <el-form-item label="减免其他">
          <el-input
            class="form_input"
            v-model="reductionTableInfo.form.otherFeeWaiver"
            placeholder="小于等于其他费用"
          ></el-input>
        </el-form-item>-->
        <el-form-item label="滞纳金：">
          <span class="form_con">{{reductionTableInfo.form.lateFee}}</span>
          <span class="form_label">减免滞纳金</span>
          <el-input class="form_input" v-model="reductionTableInfo.form.lateFeeWaiver" placeholder="小于等于滞纳金"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogReductionVisible = false">取 消</el-button>
        <el-button type="primary" @click="onReduction">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import PagesTable from "../../components/PagesTable.vue";
  export default {
    components: {
      PagesTable
    },
    data() {
      return {
        activeName: "reduction",
        form: {
          code: "",
          name: "",
          billNumber: "",
          overdueMoney: "",
          amount: "",
          reason: "",
          operator: ""
        },
        dialogReductionVisible: false,
        reductionTableInfo: {
          meterID: '45',
          userID: '',
          name: '',
          form: {
            meterReadingRecordID: "",
            waterFee: "",
            waterFeeWaiver: "",
            tax: "",
            taxWaiver: "",
            effluentFee: "",
            effluentFeeWaiver: "",
            // otherFee: "",
            // otherFeeWaiver: "",
            lateFee: "",
            lateFeeWaiver: ""
          },
          tableHeader: [{
              name: "账单编号",
              mark: "meterReadingRecordID",
              fixed: "left"
            },
            {
              name: "用户编号", //实际为水表编号
              mark: "meterID"
            },
            {
              name: "上期底数",
              mark: "lastReadingValue"
            },
            {
              name: "本期底数",
              mark: "currReadingValue"
            },
            {
              name: "用水量",
              mark: "currWaterCount"
            },
            {
              name: "水费",
              mark: "waterFee"
            },
            {
              name: "水费减免",
              mark: "waterFeeWaiver"
            },
            {
              name: "水资源税",
              mark: "tax"
            },
            {
              name: "水资源税减免",
              mark: "taxWaiver"
            },
            {
              name: "污水费",
              mark: "effluentFee"
            },
            {
              name: "污水费减免",
              mark: "effluentFeeWaiver"
            },
            // {
            //   name: "其他费用",
            //   mark: "otherFee"
            // },
            // {
            //   name: "其他费用减免",
            //   mark: "otherFeeWaiver"
            // },
            {
              name: "滞纳金",
              mark: "lateFee"
            },
            {
              name: "滞纳金减免",
              mark: "lateFeeWaiver"
            },
            {
              name: "总水费",
              mark: "totalFee"
            },
            {
              name: "总减免",
              mark: "totalWaiver"
            },
            {
              name: "应缴",
              mark: "totalRealFee"
            },
            {
              name: "操作",
              mark: "",
              fixed: "right"
            }
          ],
          tablePagination: {
            show: false,
            current: 1,
            size: 10,
            total: 0
          },
          tableOperation: [{
            name: "减免",
            mark: "reduction",
            icon: false
          }],
          tableData: [{
            meterReadingRecordID: "23",
            meterID: "45",
            lastReadingValue: "45",
            currReadingValue: "47",
            currWaterCount: "2",
            waterFee: "4.8",
            waterFeeWaiver: "0",
            tax: "0",
            taxWaiver: "0",
            effluentFee: "1.7",
            effluentFeeWaiver: "1.7",
            lateFee: "0",
            lateFeeWaiver: "0",
            totalFee: "6.5",
            totalWaiver: "1.7",
            totalRealFee: "4.8",
          }]
        },
        tableInfo: {
          sid: "",
          time: "",
          searchList: [],
          tableHeader: [{
              name: "日志内容",
              mark: "title",
              minWidth: "90"
            },
            {
              name: "用户IP",
              mark: "userip",
              minWidth: "90"
            },
            {
              name: "操作时间",
              mark: "time",
              minWidth: "90"
            },
            {
              name: "操作员",
              mark: "name",
              minWidth: "90"
            }
          ],
          tablePagination: {
            show: true,
            current: 1,
            size: 10,
            total: 2
          },
          tableData: [{
            title: "减免费用",
            userip: "23",
            time: "2024-06-24",
            name: "管理员",
          }, {
            title: "冲减水量",
            userip: "26",
            time: "2024-06-16",
            name: "管理员",
          }],
          tableDataAll: []
        }
      };
    },
    mounted() {
      const self = this;
    },
    beforeDestroy() {},
    created() {},
    methods: {
      getUserData() {
        var self = this;
        self.reductionTableInfo.name = "";
        self.reductionTableInfo.userID = "";
        self.reductionTableInfo.tableData = [];
        if (!self.reductionTableInfo.meterID) {
          self.$message.error("请输入用户编号");
          return false;
        }
        var param = {
          meterID: self.reductionTableInfo.meterID
        };
        //根据id（实际为水表编号）查询指定用户的详细信息
        self.$axios.post("/service/bsUserGet", param).then(res => {
          if (res.data.status === "success") {
            self.reductionTableInfo.name = res.data.res[0].name;
            self.reductionTableInfo.userID = res.data.res[0].userID;
            //欠费记录
            self.getNoPayRecord();
          } else {
            self.$message.error(res.data.res);
          }
        });
      },
      getNoPayRecord() {
        var self = this;
        var param = {
          userID: self.reductionTableInfo.userID
        };
        //欠费记录
        self.$axios
          .post("/service/bsMeterReadingNoPayRecordGet", param)
          .then(res => {
            if (res.data.status === "success") {
              var temp = res.data.res;
              self.reductionTableInfo.tableData = temp;
            } else {
              self.$message.error(res.data.res);
            }
          });
      },
      handlePageOperation(row, mark) {
        const self = this;
        if (mark == "reduction") {
          self.dialogReductionVisible = true;
          self.reductionTableInfo.form.meterReadingRecordID =
            row.meterReadingRecordID;
          self.reductionTableInfo.form.waterFee = row.waterFee;
          self.reductionTableInfo.form.waterFeeWaiver = row.waterFeeWaiver;
          self.reductionTableInfo.form.tax = row.tax;
          self.reductionTableInfo.form.taxWaiver = row.taxWaiver;
          self.reductionTableInfo.form.effluentFee = row.effluentFee;
          self.reductionTableInfo.form.effluentFeeWaiver = row.effluentFeeWaiver;
          // self.reductionTableInfo.form.otherFee = row.otherFee;
          // self.reductionTableInfo.form.otherFeeWaiver = row.otherFeeWaiver;
          self.reductionTableInfo.form.lateFee = row.lateFee;
          self.reductionTableInfo.form.lateFeeWaiver = row.lateFeeWaiver;
        }
      },
      onReduction() {
        //减免费用,只能发生于未结算的记录
        var self = this;
        var param = {
          meterReadingRecordID: self.reductionTableInfo.form.meterReadingRecordID,
          waterFeeWaiver: self.reductionTableInfo.form.waterFeeWaiver, //减免水费
          effluentFeeWaiver: self.reductionTableInfo.form.effluentFeeWaiver, //减免污水费
          // otherFeeWaiver: self.reductionTableInfo.form.otherFeeWaiver, //减免其他
          taxWaiver: self.reductionTableInfo.form.taxWaiver, //减免水资源税
          lateFeeWaiver: self.reductionTableInfo.form.lateFeeWaiver //减免滞纳金
        };
        self.$axios.post("/service/bsMeterPayingReduction", param).then(res => {
          if (res.data.status === "success") {
            self.$message.success(res.data.res);
            self.dialogReductionVisible = false;
            // 刷新欠费信息
            self.getNoPayRecord();
          } else {
            self.$message.error(res.data.res);
          }
        });
      },
      onSubmit() {},
      handleTableData() {
        const self = this;
        self.tableInfo.tableData = [];
        let i =
          (self.tableInfo.tablePagination.current - 1) *
          self.tableInfo.tablePagination.size;
        let j =
          self.tableInfo.tablePagination.current *
          self.tableInfo.tablePagination.size;
        if (j > self.tableInfo.tablePagination.total) {
          j = self.tableInfo.tablePagination.total;
        }
        for (i; i < j; i++) {
          self.tableInfo.tableData.push(self.tableInfo.tableDataAll[i]);
        }
      },
      pageSizeChange(data) {
        this.tableInfo.tablePagination.size = data;
        this.handleTableData();
      },
      currentPageChange(data) {
        this.tableInfo.tablePagination.current = data;
        this.handleTableData();
      }
    }
  };
</script>
<style lang="scss" scoped>
  .form_con {
    display: inline-block;
    width: 60px;
  }

  .form_label {
    display: inline-block;
    width: 90px;
    text-align: right;
    padding-right: 5px;
  }

  .form_input {
    width: 217px;
  }
</style>